<template>
	<view>
		<view>
			<view class="item" v-for="(res, index) in siteList" :key="res.id">
				<view @click="xuanz(index,res.id)">
					<view class="top">
						<view class="name">{{ res.name }}</view>
						<view class="phone">{{ res.phone }}</view>
					</view>
					<view class="bottom">
						{{res.address}}
						<u-icon color="red" size="40" name="checkbox-mark" class="dui" v-show="index==ind"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<view class="u-padding-40">
			<u-button @click="showPop(true)" class="zf">
				<text class="u-padding-left-10 text">确认支付</text>
			</u-button>
		</view>
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{price}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop2(false)">
						<u-icon name="close" color="#333333" size="28" @click="esc()"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ind: '',
				show: false,
				password: '',
				price: 1,
				siteList: [],
				id: '',
				userinfo_id: 0,
				quantity: 1,
				order_state: 1,
				gwc: "",
				gwcid: ""
			}
		},
		onLoad(e) {
			this.price = e.price
			this.id = e.id
			this.quantity = e.quantity
			this.gwc = e.gwc
			this.gwcid = e.gwc_id
			console.log(e.id)
			this.getData();
		},
		methods: {
			async del(id) {
				if (this.gwc == "gwc") {
					let {
						data: res
					} = await this.$http(`/shoppingCart/${this.gwcid}`, "delete", this.vuex_token)
					console.log(res)
				}

			},
			async esc() {
				this.order_state = 0
				let {
					data: res
				} = await this.$http("/userOrder", "post", this.vuex_token, {
					shop_id: this.id,
					user_id: this.vuex_userid,
					userInfo_id: this.userinfo_id,
					quantity: this.quantity,
					order_state: this.order_state
				})
				this.del()
				uni.navigateTo({
					url: `/pages/order/index2`
				});
				console.log(res)
			},
			xuanz(index, userinfo_id) {
				this.ind = index
				this.userinfo_id = userinfo_id
			},
			async getData() {
				let {
					data: res
				} = await this.$http("/userInfo", "get", this.vuex_token, {
					user_id: this.vuex_userid
				})

				console.log(res.data)
				if (res.data.length == 0) {
					uni.showToast({
						icon: 'success',
						title: '请添加地址'
					})
					setTimeout(() => {
						this.show = false;
						uni.navigateTo({
							url: `/pages/address/index`
						});
					}, 1000)

					return
				}
				this.siteList = res.data;
				this.userinfo_id = res.data[0].id
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				uni.showLoading({
					title: '支付中'
				})

				setTimeout(() => {
					uni.hideLoading();
					this.show = false;
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})

				}, 2000);
				this.showPop1()
				this.del()
				setTimeout(() => {
					uni.navigateBack({
						delta: 2
					});
				}, 2500)
			},
			async showPop1() {
				let {
					data: res
				} = await this.$http("/userOrder", "post", this.vuex_token, {
					shop_id: this.id,
					user_id: this.vuex_userid,
					userInfo_id: this.userinfo_id,
					quantity: this.quantity,
					order_state: this.order_state
				})
				console.log(res)
			},
			showPop(flag = true) {

				this.getData();
				this.password = '';
				this.show = flag;
			},
			showPop2(flag = true) {
				this.password = '';
				this.show = flag;
			},
		}
	}
</script>

<style lang="scss">
	.dui {
		position: absolute;
		right: 0;
		top: 60rpx
	}

	.zf {
		background-color: #ff6387;
	}

	.text {
		color: #fff;
	}

	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}

	.item {
		position: relative;
		padding: 40rpx 20rpx;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;

			.icos {
				.u-icon {
					margin-right: 20rpx;
				}
			}
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>
